<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="pageInfo.pageNo"
    :page-sizes="[10, 20, 30, 40, 50]"
    :page-size="pageInfo.pageSize"
    layout="total,prev,pager,next,sizes,jumper"
    :total="pageInfo.total"
  >
  </el-pagination>
</template>
<script>
export default {
  model: {
    prop: "modelVal",
    event: "change",
  },
  props: {
    modelVal: {
      type: Object,
      default: () => {
        return {
          pageNo: 1,
          pageSize: 10,
          total: 0,
        };
      },
    },
  },
  watch: {
    modelVal: {
      handler: function (val) {
        this.pageInfo = val;
      },
      deep: true,
      immediate: true,
    },
    pageInfo: {
      handler: function (val) {
        this.$emit("update:modelValue", val);
      },
      deep: true,
    },
  },
  data() {
    return {
      pageInfo: {},
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.$emit("change", this.pageInfo);
    },
    handleCurrentChange(val) {
      this.pageInfo.pageNo = val;
      this.$emit("change", this.pageInfo);
    },
  },
};
</script>
